<template>
  <n-form ref="formRef" :model="model" :rules="rules">
    <n-form-item path="username" label="用户名">
      <n-input v-model:value="model.username" @keydown.enter.prevent />
    </n-form-item>
    <n-form-item path="password" label="密码">
      <n-input
        v-model:value="model.password"
        type="password"
        @input="handlePasswordInput"
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-row :gutter="[0, 24]">
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button
            :disabled="model.password === null"
            round
            type="primary"
            @click="handleValidateButtonClick"
          >
            login
          </n-button>
        </div>
      </n-col>
    </n-row>
  </n-form>

  <!--  <pre>{{ JSON.stringify(model, null, 2) }}-->
  <!--</pre>-->
</template>

<script setup lang="ts">
import { testLogin } from '@/api/Login'
import { ref, reactive } from 'vue'
interface ModelType {
  username: string | null
  password: string | null
}
const handleValidateClick = () => {
  console.log('handleValidateClick')
}
const handlePasswordInput = () => {
  console.log('handlePasswordInput')
}
const handleValidateButtonClick = async () => {
  const result = await testLogin(model.value)
  console.log(result)
}
const model = ref<ModelType>({
  username: 'username',
  password: 'password'
})
const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['input', 'blur']
  }
}
</script>
